import React, { useState } from 'react';
import {
	Alert,
	Modal,
	StyleSheet,
	Text,
	TouchableHighlight,
	View
} from 'react-native';
const styles = StyleSheet.create({
	centeredView: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		marginTop: 22
	},
	modalView: {
		margin: 20,
		backgroundColor: 'white',
		borderRadius: 20,
		padding: 35,
		alignItems: 'center',
		shadowColor: '#000',
		shadowOffset: {
			width: 0,
			height: 2
		},
		shadowOpacity: 0.25,
		shadowRadius: 3.84,
		elevation: 5
	},
	openButton: {
		backgroundColor: '#F194FF',
		borderRadius: 20,
		padding: 10,
		elevation: 2
	},
	textStyle: {
		color: 'white',
		fontWeight: 'bold',
		textAlign: 'center'
	},
	modalText: {
		marginBottom: 15,
		textAlign: 'center'
	}
});
const ModalPage = () => {
	const [modalVisible, setModalVisible] = useState(false);
	return (
		<View style={styles.centeredView}>
			<Modal
    animationType="slide"
    onRequestClose={() => {
					Alert.alert('Modal has been closed.');
				}}
    transparent
    visible={modalVisible}
			>
				<View style={styles.centeredView}>
					<View style={styles.modalView}>
						<Text style={styles.modalText}>Hello World!</Text>

						<TouchableHighlight
    onPress={() => {
								setModalVisible(!modalVisible);
							}}
    style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
						>
							<Text style={styles.textStyle}>Hide Modal</Text>
						</TouchableHighlight>
					</View>
				</View>
			</Modal>

			<TouchableHighlight
    onPress={() => {
					setModalVisible(true);
				}}
    style={styles.openButton}
			>
				<Text style={styles.textStyle}>Show Modal</Text>
			</TouchableHighlight>
		</View>
	);
};



export default ModalPage;
